import React, { Component } from 'react';
import {user_register} from '../utils/api'
class Reg extends Component {
    constructor(props){
        super(props);
        this.state = {
          phone:'',
          pass:'',
          checkpass:''
        }
      }
      login(){
        if(this.state.phone&&this.state.pass){
            if(this.state.pass===this.state.checkpass){
                var {checkpass,...params}=this.state;
                user_register(params).then((res)=>{
                    if(res.data.code === 200){
                        console.log(res.data);
                        alert(res.data.msg)
                    }else{
                        alert(res.data.msg)
                    }
                })
            }
            
        }
      }
    
      handleChange(e){
        //e表单元素的onChange事件的事件对象
        //e.currentTarget  表单元素
        //e.currentTarget.name  表单元素的value
        this.setState({
          [e.currentTarget.name]:e.currentTarget.value
        })
      }
    render() {
        return (
            <div className='reg'>
                <div className='login-box'>
                    <div className='title'>注册页</div>
                    <div className="line">
                        <input type="text" placeholder='请输入账号' name='phone' defaultValue={ this.state.phone} onChange={(e)=>{this.handleChange(e)}}/>
                    </div>
                    <div className="line">
                        <input type="password" placeholder='请输入密码' name='pass' defaultValue={ this.state.pass} onChange={(e)=>{this.handleChange(e)}}/>
                    </div>
                    <div className="line">
                        <input type="password" placeholder='请确认密码' name='checkpass' defaultValue={ this.state.checkpass} onChange={(e)=>{this.handleChange(e)}}/>
                    </div>
                    <div className="linee">
                        <input type="button" onClick={()=>{this.login()}} value="注册" />
                    </div>
                </div>
            </div>
        );
    }
}

export default Reg;